<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="box1" id='box1'>box1</div>
<div class="box2">box2</div>
<a href="https://www.baidu.com">百度</a>

<script type="text/javascript">
    // 通过js定位原生

    var b1 = document.getElementById('box1');
    var b2 = document.getElementsByClassName('box2'); // getElementsByClassName找出来的是集合
    var c = document.getElementsByTagName('a')[0];


    //通过js或者document设置元素样式  元素.style.样式名=值
    b1.style.height = '100px';
    b2[0].style.color = 'red';


    // 获取元素属性或者更改属性值：元素.属性名=属性值
    c.href = 'http://www.lemonban.com';

    // 元素文本的操作，二者区别，innerText只能设置文本，innerHTML可以设置文本和标签
    b1.innerText='python666';
    b1.innerHTML='<h1>测开四期</h1>';



    // 给元素添加点击事件
    b1.onclick = function () {
        alert('musen添加点击事件')
    }


</script>
</body>
</html>